<template>
	<detailbox :title="type == 1 ? '重新编辑' : '新增'" @leftclick="close">
		<div slot="right" class="flex_item flex_between">
			<div v-if="type == 1" class="error error_f f12 ml10 flex_start">
				<i class="f14 el-icon-error"></i>
				审核未通过:
				<span class="ml30">
					{{ checkItem.type == 1 ? '审核人:' : checkItem.type == 3 ? '记录责任人:' : checkItem.type == 4 ? '批准人:' : '' }} {{ checkItem.createUserName }}
				</span>
				<span class="ml30">未通过原因: {{ checkItem.content }}</span>
			</div>
			<div v-else></div>
			<div class="flex_end">
				<el-button type="success" size="small" @click="addFile" v-if="type != 1">添加新增</el-button>
				<el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
				<el-button type="primary" size="small" @click="submit">提交</el-button>
			</div>
		</div>
		<el-row>
			<el-col :span="18">
				<div style="margin-top:10px;" v-for="(form, index) in formList" :key="index" :id="'item'+index">
					<basic-container>
						<div class="main_title success_f flex_between">
							<b>
								管理信息
								<span v-if="formList.length > 1">({{ index + 1 }})</span>
							</b>
							<el-button type="danger" size="small" plain v-if="index != 0" @click="delFile(index)">删除</el-button>
						</div>
						<el-divider></el-divider>
						<div class="mb20">
							<span class="index_num success_bg">1</span>
							<b class="f14">基础信息</b>
						</div>
						<div>
							<el-form size="small" inline model="form">
								<el-form-item label="产品清洁管理编号:" required>
									<el-input v-model="form.number" placeholder="数据带入" class="w160 ml10" readonly v-if="form.numberType == 0"></el-input>
									<el-input class="ml10 w160" placeholder="请输入" v-model="form.number" v-if="form.numberType == 1"></el-input>
									<el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
										<div>
											<p>CPQJ--------产品清洁</p>
											<p>xxxx---------年月日(编辑日期，8位)</p>
											<p>xx---------流水号,从01开始</p>
										</div>
										<i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
									</el-popover>
								</el-form-item>

								<el-row>
									<el-col :span="12">
										<el-form-item label="清洁管理类别:" required>
											<el-radio-group v-model="form.cleanType" @change="getPlanNumberList($event, form)">
												<el-radio :label="0">原材料</el-radio>
												<el-radio :label="1">中间品</el-radio>
												<el-radio :label="2">成品</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item :label="form.cleanType == 0 ? '原材料批号:' : '生产批号:'" required>
											<el-select
												v-model="form.batchNumber"
												:no-data-text="
													form.cleanType == 0 ? '未录入采购品(原材料)检验' : form.cleanType == 1 ? '未录入生产管理(中间品)' : '未录入生产管理(成品)'
												"
												class="w160"
												filterable
												placeholder="请选择"
												@change="getProductList($event, form)"
											>
												<el-option v-for="item in form.developmentplanList" :key="item.id" :label="item.batchNumber" :value="item.id"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>

								<template v-if="form.cleanType != 2">
									<el-form-item :label="form.cleanType == 0 ? '原材料' : form.cleanType == 1 ? '中间品' : '成品'">
										<el-button size="mini" class="el-icon-circle-plus-outline" type="primary" plain @click="addItem(form, 0)">增加</el-button>
									</el-form-item>
									<div class="reviewCon mb20" v-for="(item, i) in form.cleanList" :key="i">
										<div class="reviewList">
											<el-row>
												<template v-if="form.cleanType == 0">
													<el-col :span="8">
														<el-form-item label="原材料名称:" required>
															<el-select placeholder="请输入/搜索" class="w160" v-model="item.productName" @change="getItemData($event, item, form)">
																<el-option v-for="v in form.productList" :key="v.id" :label="v.materialName" :value="v.id"></el-option>
															</el-select>
														</el-form-item>
													</el-col>
													<el-col :span="8">
														<el-form-item label="规格型号:" required>
															<el-select placeholder="请输入/搜索" class="w160" v-model="item.productSku">
																<el-option v-for="v in form.productList" :key="v.id" :label="v.materialSku" :value="v.materialSku"></el-option>
															</el-select>
															<!-- <el-input placeholder="数据带入" readonly class="w160" v-model="item.productSku"></el-input> -->
														</el-form-item>
													</el-col>
													<el-col :span="8">
														<el-form-item label="原材料编号:" required>
															<el-input type="text" placeholder="数据带入" class="w160" v-model="item.productNumber"></el-input>
														</el-form-item>
													</el-col>
												</template>
												<template v-if="form.cleanType == 1">
													<el-col :span="8">
														<el-form-item label="中间品名称:" required>
															<el-select
																v-model="item.middleName"
																no-data-text="未录入中间品检验"
																class="w160"
																filterable
																placeholder="请输入/搜索"
																@change="getItemData($event, item, form)"
															>
																<el-option v-for="v in form.productList" :key="v.batchNumber" :label="v.middleName" :value="v.id"></el-option>
															</el-select>
														</el-form-item>
													</el-col>
													<el-col :span="8">
														<el-form-item label="中间品规格型号:" required>
															<el-select
																v-model="item.middleSku"
																no-data-text="未录入中间品检验"
																class="w160"
																filterable
																placeholder="请输入/搜索"
																@change="getItemData($event, item, form)"
															>
																<el-option v-for="v in form.productList" :key="v.id" :label="v.middleSku" :value="v.middleSku"></el-option>
															</el-select>
														</el-form-item>
													</el-col>
													<el-col :span="8">
														<el-form-item label="中间品编号:" required>
															<el-input placeholder="数据带入" readonly class="w160" v-model="item.middleNumber"></el-input>
														</el-form-item>
													</el-col>
												</template>
												<el-col :span="8">
													<el-form-item label="数量:" required>
														<el-input placeholder="请输入" class="w160" v-model="item.qty" readonly></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="8">
													<el-form-item label="单位:" required>
														<el-input placeholder="数据带入" class="w160" v-model="item.unit" readonly></el-input>
													</el-form-item>
												</el-col>
											</el-row>

											<i class="error_f el-icon-delete pointer f20 delete" @click="delItem(form, i, 0)" v-if="i > 0"></i>
											<div>
												<el-form-item label="是否使用设备:" required>
													<el-select placeholder="请选择" class="w100" v-model="item.isUser" @change="getdeviceDataList($event, item)">
														<el-option :value="0" label="否"></el-option>
														<el-option :value="1" label="是"></el-option>
													</el-select>
												</el-form-item>
												<el-button
													size="small"
													class="el-icon-circle-plus-outline ml10"
													type="primary"
													plain
													@click="addItem(item, 1)"
													v-if="item.isUser == 1"
												>
													增加
												</el-button>
											</div>
											<div class="reviewCon mb20" v-for="(v, i) in item.deviceList" :key="i">
												<el-row class="reviewList">
													<el-col :span="8">
														<el-form-item label="设备编号:" required>
															<el-select
																v-model="v.deviceNumber"
																no-data-text="未录入设备管理"
																class="w160"
																filterable
																default-first-option
																placeholder="请搜索/选择"
																@change="getdevice($event, v)"
															>
																<el-option v-for="m in deviceList" :key="m.id" :label="m.deviceNumber" :value="m.id"></el-option>
															</el-select>
														</el-form-item>
													</el-col>
													<el-col :span="8">
														<el-form-item label="设备名称:" required>
															<el-select
																v-model="v.deviceName"
																no-data-text="未录入设备管理"
																class="w160"
																filterable
																default-first-option
																placeholder="请搜索/选择"
																@change="getdevice($event, v)"
															>
																<el-option v-for="m in deviceList" :key="m.id" :label="m.name" :value="m.id"></el-option>
															</el-select>
														</el-form-item>
													</el-col>
													<el-col :span="8">
														<el-form-item label="设备型号:" required>
															<el-select
																v-model="v.deviceModel"
																no-data-text="未录入设备管理"
																class="w160"
																filterable
																default-first-option
																placeholder="请搜索/选择"
																@change="getdevice($event, v)"
															>
																<el-option v-for="m in deviceList" :key="m.id" :label="m.model" :value="m.id"></el-option>
															</el-select>
														</el-form-item>
													</el-col>
													<i class="error_f el-icon-delete pointer f20 delete" @click="delItem(item, i, 1)"></i>
												</el-row>
											</div>
										</div>
									</div>
								</template>
								<template v-if="form.cleanType == 2">
									<el-row>
										<el-col :span="12">
											<el-form-item label="产品名称:" required>
												<el-select
													v-model="form.productName"
													no-data-text="未录入中间品检验"
													class="w160"
													filterable
													placeholder="请输入/搜索"
													@change="getProductName($event, form)"
												>
													<el-option v-for="v in developmentplanList" :key="v.id" :label="v.productName" :value="v.id"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="规格型号:" required>
												<el-select v-model="form.productSku" no-data-text="未录入中间品检验" class="w160" filterable placeholder="请输入/搜索">
													<el-option v-for="v in developmentplanList" :key="v.id" :label="v.productSku" :value="v.id"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="产品编号:" required>
												<el-input placeholder="请输入" class="w160" v-model="form.productNumber" readonly></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="数量:" required><el-input placeholder="请输入" class="w160" v-model="form.qty" readonly></el-input></el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="单位:" required>
												<el-input placeholder="数据带入" class="w160" v-model="form.unit" readonly></el-input>
											</el-form-item>
										</el-col>
									</el-row>
									<div>
										<el-form-item label="是否使用设备:" required>
											<el-select placeholder="请选择" class="w100" v-model="form.isUser" @change="getdeviceDataList($event, form)">
												<el-option :value="0" label="否"></el-option>
												<el-option :value="1" label="是"></el-option>
											</el-select>
										</el-form-item>
										<el-button size="small" class="el-icon-circle-plus-outline ml10" type="primary" plain @click="addItem(form, 1)" v-if="form.isUser == 1">
											增加
										</el-button>
									</div>
									<div class="reviewCon mb20" v-for="(v, i) in form.deviceList" :key="i">
										<el-row class="reviewList">
											<el-col :span="8">
												<el-form-item label="设备编号:" required>
													<el-select
														v-model="v.deviceNumber"
														no-data-text="未录入设备管理"
														class="w160"
														filterable
														default-first-option
														placeholder="请搜索/选择"
														@change="getdevice($event, v)"
													>
														<el-option v-for="m in deviceList" :key="m.id" :label="m.deviceNumber" :value="m.id"></el-option>
													</el-select>
												</el-form-item>
											</el-col>
											<el-col :span="8">
												<el-form-item label="设备名称:" required>
													<el-select
														v-model="v.deviceName"
														no-data-text="未录入设备管理"
														class="w160"
														filterable
														default-first-option
														placeholder="请搜索/选择"
														@change="getdevice($event, v)"
													>
														<el-option v-for="m in deviceList" :key="m.id" :label="m.name" :value="m.id"></el-option>
													</el-select>
												</el-form-item>
											</el-col>
											<el-col :span="8">
												<el-form-item label="设备型号:" required>
													<el-select
														v-model="v.deviceModel"
														no-data-text="未录入设备管理"
														class="w160"
														filterable
														placeholder="请搜索/选择"
														@change="getdevice($event, v)"
													>
														<el-option v-for="m in deviceList" :key="m.id" :label="m.model" :value="m.id"></el-option>
													</el-select>
												</el-form-item>
											</el-col>
											<i class="error_f el-icon-delete pointer f20 delete" @click="delItem(form, i, 1)"></i>
										</el-row>
									</div>
								</template>
								<el-row>
									<el-col :span="12">
										<el-form-item label="管理部门:" required>
											<el-cascader
												class="w160"
												placeholder="请选择"
												ref="newdept"
												:options="deptOption"
												v-model="form.manageDeptId"
												:show-all-levels="false"
												:props="{
													value: 'id',
													label: 'deptName',
													emitPath: false,
													checkStrictly: true
												}"
												filterable
												@change="getMemberOption($event, form, index)"
											></el-cascader>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="负责人:" required>
											<el-select placeholder="请选择" v-model="form.manageUserId" class="w160" filterable @change="selectChange($event, form)">
												<el-option v-for="item in form.memberOption" :key="item.id" :value="item.id" :label="item.name"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="编制部门:" required>
											<el-input v-model="userInfo.deptName" placeholder="数据带入" readonly class="w160"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div style="margin-bottom: 10px;"><creat-file :form="form"></creat-file></div>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="6" style="margin-top:10px;"><creat-flow ref="creatFlow" :formList="formList"></creat-flow></el-col>
		</el-row>
		<steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
		<confirm
			ref="confirm"
			@close="save()"
			type="1"
			:guifanFilesProcessRecordList="guifanFilesProcessRecordList"
			:systemGuifanFilesProcessList="systemGuifanFilesProcessList"
		></confirm>
		<showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
	</detailbox>
</template>

<script>
import confirm from './confirm.vue';
import { savefiles, getguifanDetail, update, getguifanList } from '@/api/myapi/tixiwenjian';
export default {
	props: {
		detailId: '',
		type: {
			type: [Number, String],
			default: 0
		}
	},
	components: {
		confirm
	},
	data() {
		return {
			system: 'productcleanprocess',
			deviceList: [],
			formList: [
				{
					cleanType: 0,
					numberType: 0,
					deviceList: [], //   设备列表
					outsourcingList: [], //外包服务列表
					productList: [], //原材料列表
					softwareList: [], //计算机应用软件列表
					jiluFileList: [],
					guifanFileList: [],
					memberOption: [],
					developmentplanList: [],
					cleanList: [{}]
				}
			],
			guifanFilesProcessRecordList: [],
			systemGuifanFilesProcessList: []
		};
	},
	created() {
		if (this.detailId) {
			this.getDetail();
		} else {
			this.findTypeByProcessType();
		}
		this.getdeptlist();
		this.getPlanNumberList();
	},
	methods: {
		radioChange(type, form) {
			form.batchNumber = '';
			form.productName = ''; //名称
			form.productNumber = ''; //编号
			form.productSku = ''; //	规格型号
		},
		getDetail() {
			getguifanDetail(
				{
					id: this.detailId
				},
				this.system
			).then(({ data }) => {
				console.log(data);
				if (data.success) {
					if (this.type == 2) {
						delete data.data.id;
						data.data.number = '';
						data.data.numberType = 0;
						this.findTypeByProcessType();
					}
					this.formList = [data.data];
					this.formList.forEach(item => {
						item.deviceList && item.deviceList.length != 0 ? (item.isUser = 1) : (item.isUser = 0);
						this.getuserByDept(item.manageDeptId, item);
					});
					this.guifanFilesProcessRecordList = data.data.processRecordList;
					this.checkItem = this.guifanFilesProcessRecordList.find(item => item.checkStatus == 2);
					this.$nextTick(() => {
						this.$refs.creatFlow.setProcessRecord(this.guifanFilesProcessRecordList);
					});
				}
			});
		},
		close() {
			this.$emit('close');
		},
		//   原材料 批号   生产批号
		getPlanNumberList(cleanType = 0, form) {
			/// 0  采购品检验 原材料 purchaseexamineprocess   1   中间品 检验  2 成品 检验
			let url = cleanType == 0 ? 'purchaseexamineprocess' : cleanType == 1 ? 'middleexamineprocess' : 'productexamineprocess';
			let parmas = {
				current: 1,
				size: 10000,
				processStatus: 7
			};
			cleanType == 0 ? (parmas.purchaseType = 0) : '';
			getguifanList(parmas, url).then(({ data }) => {
				console.log('检验');
				console.log(data);
				if (data && data.success) {
					if (form) {
						form.batchNumber = '';
						form.middleName = '';
						form.middleNumber = '';
						form.middleSku = '';
						form.productName = ''; //名称
						form.productNumber = ''; //编号
						form.productSku = ''; //	规格型号
						form.developmentplanList = data.data.records;
					} else {
						this.$set(this.formList[0], 'developmentplanList', data.data.records);
					}
				}
			});
		},
		//新增部分数据  purchaseType=0 采购品检验原材料信息   purchaseType=1 生产管理中间品信息  purchaseType=2 生产管理成品信息
		getProductList(id, form) {
			form.batchNumber = form.developmentplanList.find(item => item.id == id).batchNumber;
			let cleanType = form.cleanType;
			let parmas = {
				current: 1,
				size: 10000
			};
			let url = '';
			if (cleanType == 0) {
				url = 'purchaseexamineprocessmaterial';
				parmas.isTongguo = 1;
				parmas.processId = id;
			} else if (cleanType == 1) {
				url = 'middleexamineprocessmiddle';
			} else {
				url = 'productionmanagegongxumiddle';
			}
			getguifanList(parmas, url).then(({ data }) => {
				console.log('111111');
				console.log(data);
				if (data && data.success) {
					if (form) {
						form.middleName = '';
						form.middleNumber = '';
						form.middleSku = '';
						form.productName = ''; //名称
						form.productNumber = ''; //编号
						form.productSku = ''; //	规格型号
						form.productList = data.data.records;
					} else {
						this.$set(this.formList[0], 'productList', data.data.records);
					}
				}
			});
		},
		getMemberOption(val, form, index) {
			console.log(val);
			let dept = this.$refs.newdept[index].getCheckedNodes();
			form.manageDeptName = dept[0].label;
			form.manageDeptId = dept[0].value;
			form.manageUserId = '';
			form.manageUserName = '';
			this.getuserByDept(val, form);
		},
		getItemData(id, child, form) {
			let item = form.productList.find(e => e.id == id);
			child.qty = item.failedQty;
			child.unit = item.unit;
			if (form.cleanType == 0) {
				child.productNumber = item.materialNumber;
				child.productName = item.materialName;
			} else if (form.cleanType == 1) {
				child.middleName = item.middleName;
				child.middleNumber = item.middleNumber;
				child.middleSku = item.middleSku;
			} else {
				child.productCode = item.productCode;
				child.productName = item.productName;
				child.productSku = item.productSku;
			}
		},
		getdevice(id, form) {
			let item = this.deviceList.find(e => e.id == id);
			form.deviceName = item.name;
			form.deviceModel = item.model;
			form.deviceNumber = item.deviceNumber;
		},
		//  设备管理
		getdeviceDataList(id, form) {
			if (id == 0) form.deviceList = [];
			if (this.deviceList.length == 0) {
				this.getDevice();
			}
		},
		addItem(form, type) {
			if (type == 0) {
				form.cleanList.push({});
			} else {
				if (!form.deviceList) this.$set(form, 'deviceList', []);
				form.deviceList.push({});
			}
			this.$forceUpdate();
		},
		delItem(form, i, type) {
			if (type == 0) {
				form.cleanList.splice(i, 1);
			} else {
				form.deviceList.splice(i, 1);
				if (form.deviceList.length == 0) {
					form.isUser = 0;
				}
			}
		},
		submit() {
			let systemGuifanFilesProcessList = [];
			let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList;
			let isOnlineReview = this.$refs.creatFlow.isOnlineReview;
			for (let i = 0; i <= guifanFilesProcessRecordList.length - 1; i++) {
				let item = guifanFilesProcessRecordList[i];
				item.sort=i;
				if (item.type == 1 && !item.userId) {
					this.$message.error('请选择审核人员');
					return;
				}
				if (item.type == 4 && !item.userId) {
					this.$message.error('请选择批准人员');
					return;
				}
				if (isOnlineReview && item.type == 3 && !item.userId) {
					this.$message.error('请选择记录责任人');
					return;
				}
			}
			for (let i = 0; i < this.formList.length; i++) {
				let item = this.formList[i];
				let arr = [
					{
						value: item.number,
						tips: '请补充产品清洁管理编号'
					},
					{
						value: item.batchNumber,
						tips: item.cleanType == 0 ? '请选择原材料批号' : '请选择生产批号'
					},
					{
						value: item.manageDeptId,
						tips: '请选择管理部门'
					},
					{
						value: item.manageUserId,
						tips: '请选择负责人'
					},
					{
						value: item.jiluFilesIds,
						tips: '请添加记录文件'
					},
					{
						value: item.retentionPeriod,
						tips: '请输入记录保留期限'
					},
					{
						value: item.retentionPeriod < 2 ? false : true,
						tips: '记录保留期限应≥2年'
					}
				];
				for (let j = 0; j < arr.length; j++) {
					if (!arr[j].value) {
						this.$message.error(arr[j].tips);
						return;
					}
				}
				item.createDeptName = this.userInfo.deptName;
				item.createUserName = this.userInfo.user_name;
				item.createUserId = this.userInfo.user_id;
				item.createDeptId = this.userInfo.dept_id;
				systemGuifanFilesProcessList.push({
					...item,
					// depts: item.depts.join(','),
					processRecordList: guifanFilesProcessRecordList
				});
			}
			this.systemGuifanFilesProcessList = systemGuifanFilesProcessList;
			this.guifanFilesProcessRecordList = guifanFilesProcessRecordList;
			console.log(this.systemGuifanFilesProcessList);
			console.log(this.guifanFilesProcessRecordList);
			this.openDialg('confirm');
		},
		// 保存
		save() {
			if (this.type == 1) {
				// console.log(JSON.stringify(this.systemGuifanFilesProcessList));
				update(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
					if (data.success) {
						this.$message.success('提交成功');
						this.nowdate = this.dateFormat(new Date());
						this.openDialg('steps');
					}
				});
			} else {
				// console.log(this.systemGuifanFilesProcessList)
				savefiles(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
					if (data.success) {
						this.$message.success('提交成功');
						this.nowdate = this.dateFormat(new Date());
						this.openDialg('steps');
					}
				});
			}
		},
		success() {
			this.$emit('success');
		},
		// 发放的文件
		addFile() {
			this.formList.push({
				memberOption: [],
				numberType: this.numberType,
				number: this.numberType == 0 ? this.findTypeByProcessType(this.liushuihao) : '',
				cleanType: 0,
				jiluFileList: [],
				guifanFileList: [],
				cleanList: [{}]
			});
			let index=this.formList.length-1;
			setTimeout(()=>{
				let document=window.parent.document.getElementById(`item${index}`);
				document.scrollIntoView({behavior:'smooth'});
			},100)
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.delete {
	position: absolute;
	top: 10px;
	right: 10px;
}
.error {
	background-color: #fceeec;
	border: 1px solid #f9dcd9;
	padding: 6px 10px;
	border-radius: 2px;
}
.reviewList {
	background: #ffffff;
	border: 1px dashed #e4e8ed;
	padding: 20px 20px 0 20px;
	position: relative;
}
</style>
